<template>
  <view>
    <uni-swiper-dot 
      :info="swiperInfo" 
      :current="current" 
      mode="round"
      :dots-styles="{
        width: 7,
        backgroundColor: '#888',
        border: '#888',
        color: '#fff',
        selectedBackgroundColor: '#fff',
        selectedBorder: '#fff'
      }"
      field="content"
    >
      <swiper 
        :autoplay="true" 
        :interval="6000"
        :duration="2000"
        :circular="true"
        :current="swiperDotIndex"
        @change="change"
      >
        <swiper-item v-for="(item, index) in swiperInfo" :key="index">
          <image class="swiper-image" :src="item" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script>
import { getSwiper } from '@/common/api/index.js'
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      swiperInfo: []
    }
  },
  onLoad() {
    getSwiper().then(res => {
      this.swiperInfo = res
    })
  },
  methods: {
    change(e) {
      this.current = e.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
	.swiper-image{
		width: 100%;
		height: 100%;
		border-radius: 3px 3px 3px 3px;
		text-align: center;
	}
</style>
